<template>
  <view :class="loginType==0?'login':'register'" style="height:750px;max-width: 100vw; overflow-x: hidden; overflow-y: hidden;">
    <view v-if="loginType==0">
      <img style="width: 100vw" src="https://hyxs.ychlkj.cn/uploads/20240110/8b0d973274a551481dbc6400c42eccf6.png"  />
    </view>

    <view v-if="loginType==1" style="position: absolute;top: 20px;left: 20px">
      <img style="width: 100px;height: 36px" src="https://hyxs.ychlkj.cn/uploads/20231226/dad4c7bb87c9d1f7d25a6e44c66c288d.png" />
    </view>

    <view v-if="loginType==1" style="text-align: center;position: absolute;top: 84px;width: 100%">
      <img style="width: 280px;height: 60px" src="https://hyxs.ychlkj.cn/uploads/20231226/a90eb96f093be68730afd46740e3ef33.png" />
    </view>

    <view v-if="loginType==1" style="text-align: center;position: absolute;top: 152px;width: 100%">
      <img style="width: 226px;height: 25px" src="https://hyxs.ychlkj.cn/uploads/20231226/2afd8ec6de9e2b1f21a038cca00680e1.png" />
    </view>

    <!--未登录-->

    <view v-if="loginType==0" style="position: relative;top: -180px;left: 40px">

      <view style="color: #fff;font-size: 30px;margin-bottom: 10px">Hello！</view>
      <view style="color: #fff">欢迎来到鸿鹄畅听平台</view>

    </view>

    <view style="background: #fdfdfe;padding-bottom: 8px;position: relative;top: -140px;margin: 2px 24px;border-radius: 16px;box-shadow: -1px 2px 5px 1px #d2d2d2;" v-if="loginType==0">

      <view style="color: #202020;width: 50px;text-align: center;margin-left: 30px;padding-top: 16px;font-size: 18px;font-weight: 600">登录
        <view style="margin-top: -8px;height: 8px;width: 52px;background: linear-gradient(170deg, #E95318 0%, #FF2519 100%);border-radius: 6px"></view>
      </view>

      <view style="font-size: 15px;color: #202020;text-align: left;padding-top: 16px;margin-left: 32px;font-weight: 500">手机号码注册</view>
      <!--      <view style="font-size: 30px;color: #f72405;text-align: center;padding-top: 4px">000000</view>-->
      <view style="height: 0px;width: 80%;background: #bebebe;margin: 12px auto"></view>
      <view style="text-align: center">
        <view style="display: flex;justify-content: space-between;">
          <input type="text" id="myInput" style="background: #F8F8F8;text-align: left;height: 40px;padding:10px;border-radius: 4px;width: 80%;margin:8px auto;font-size: 14px" placeholder="请输入手机号" v-model="phoneValue"></input>
        </view>

        <view style="display: flex;justify-content: center;align-items: center;margin-bottom: 8px">
          <input type="text" id="myInput" style="
          background: #F8F8F8;text-align: left;height: 40px;padding:10px;border-radius: 4px;
          width: 43%;margin: 8px 8px 8px 18px;font-size: 14px" placeholder="请输入图形验证码" v-model="firstsValue"></input>

          <view class="register1" style="width:40%">
            <view class="firsts_s_r" @click="click">
              <canvas :style="{width:width+'px',height:height+'px'}" canvas-id="canvasW"
                      @error="canvasT"></canvas>
            </view>
          </view>

        </view>

        <view style="display: flex;justify-content: center;margin: auto;background: #F8F8F8;width: 86%;border-radius: 4px;">
          <input type="text"  id="myInput" style="height: 40px;text-align: left;padding: 10px;border-radius: 4px;width: 45%;font-size: 14px;
          margin-right: 3%;background: #F8F8F8;" placeholder="请输入验证码"
                 v-model="codeValue"></input>
          <view v-if="codeType==1" style="width: 32%;color: #E95318;border-radius: 6px;
          display: flex;align-items: center;justify-content: center" @click="getCode()">获取验证码</view>

          <view v-if="codeType==2" style="width: 32%;color: #E95318;border-radius: 6px;
          display: flex;align-items: center;justify-content: center">{{ countdown }}秒</view>
        </view>

<!--        <view style="display: flex;justify-content: space-between;margin-top: 8px">-->
<!--          <input type="text"  id="myInput" style="font-size: 14px;text-align: left;height: 40px;-->
<!--          padding:10px;border-radius: 4px;width: 80%;margin:8px auto;background: #F8F8F8;" placeholder="请输入邀请码" v-model="inviteValue"></input>-->
<!--        </view>-->

        <view style="color: #9c9c9c;font-size: 12px;margin-top: 24px">

          本人已阅读并同意
          <text style="color: #E95318">《用户服务协议》</text>、
          <text style="color: #E95318">《用户隐私政策》</text>


        </view>


      </view>
      <view @click="login()" style="margin: 16px  auto;font-size: 14px;width: 80%;border-radius: 4px;background: linear-gradient(93deg, #E95318 0%, #FF2519 100%);;text-align: center;padding: 14px;color: #fff">登录</view>

<!--      <view style="text-align: center;color: #E95318;padding-bottom: 12px;font-size: 14px" @click="download">下载鸿鹄畅听APP</view>-->
    </view>
    <!--未登录-->
    <view style="position: relative;top: 260px;margin: 2px 36px;border-radius: 16px" v-if="loginType==1">
      <view style="font-size: 16px;text-align: center;padding-top: 20px">邀请口令</view>
      <view style="font-size: 24px;color: #FC2D1A;text-align: center;padding-top: 4px">{{userInfo.invite_code}}</view>
      <!--      <view style="height: 1px;width: 80%;background: #bebebe;margin: 12px auto"></view>-->
      <view style="text-align: center">
        <img style="width: 180px;height: 180px;    border-radius: 8px;
    border: 2px solid #e8d3c1;"
             :src="'http://hyxs.ychlkj.cn'+ userInfo.invite_rwm">
      </view>
      <view style="font-size: 12px;text-align: center;padding-top: 4px;">长按识别二维码下载APP</view>
      <view style="display: flex;justify-content: space-around;margin: 12px auto;width: 80%">
        <view style="border: 1px solid #FC2D1A;color: #FC2D1A;width: 80px;text-align: center;
        padding: 6px;font-size: 16px;border-radius: 6px" @click="Clipboard()">复制口令</view>
        <view style="background: linear-gradient(93deg, #E95318 0%, #FF2519 100%);
        color: #fff;border-radius: 6px;width: 80px;text-align: center;padding: 6px;
        font-size: 16px" @click="copyImg()">保存图片</view>
      </view>
      <view style="color: #FC2D1A;font-size: 20px;text-align: center;">当前邀请{{all_children}}人</view>
    </view>


    <view v-if="loginLoading==1" style="position: fixed;top: 0;width: 100vw;height: 100vh;background: rgba(0,0,0,0.6);">

      <view style="position: absolute;top: 290px;width: 80vw;text-align: center;margin: 0 40px;background: linear-gradient(226deg, #FFB991 0%, #ffdeb4 32%, #FFFFFF 70%);border-radius: 6px 6px 6px 6px;height: 215px">
        <view style="position: absolute;
    top: -45px;
    right: 2px;
    width: 28px;
    height: 28px;" @click="loginLoading=0">
          <img style="width: 28px;height: 28px" src="https://hyxs.ychlkj.cn/uploads/20231226/0f567d325ecb4233010fde947b665837.png">
        </view>
        <view>
          <img style="    width: 230px;
    height: 170px;
    margin-top: -85px;" src="https://hyxs.ychlkj.cn/uploads/20231226/e54cebda847bfa32e5fab7a726cff33e.png">
        </view>

        <view style="text-align: center;font-weight: 600;
color: #FF3000;font-size: 18px;margin-top: 15px;letter-spacing: 2px;">
          恭喜注册成功
        </view>
        <view style="margin-top: 10px;color: #777777;line-height: 21px;font-size: 14px;font-weight: 400;letter-spacing: 4px;">请等待app下载通知</view>
        <view style="color: #777777;line-height: 21px;font-size: 14px;font-weight: 400;letter-spacing: 4px;">详情联系邀请人</view>

      </view>
    </view>


  </view>
</template>

<script>
import {getMyUserInfo, postSmsSend, postUserLogin} from "@/http/api";

export default {
  name: "invite",
  data() {
    return {
      loginType:0,
      phoneValue:'', //手机号
      codeValue:'', //验证码
      inviteValue:'', //邀请码
      codeType:1, //验证码类型
      userInfo:'',//用户信息
      all_children:0,
      y_url:'', //邀请链接
      y_ewm:'', //二维码
      countdown: 60,
      loginLoading:0,
      verCode: "",
      width: 120,
      height: 40,
      firstsValue:'', //输入的验证码
      oldStr:'', //正确的验证码
    }
  },
  onLoad(options) {


    // const userAgent = navigator.userAgent.toLowerCase();
    // if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
    //   // 移动端
    //   console.log('移动端')
    // } else {
    //   // pc端
    //   console.log('PC端', options)
    //
    //   if (options.iv!=''||options.iv) {
    //     uni.navigateTo({
    //       url: '/pages/index/indexPC?iv=' + options.iv
    //     })
    //   }else{
    //     uni.navigateTo({
    //       url: '/pages/index/indexPC'
    //     })
    //   }
    //
    //
    // }



    // console.log(options)
    // if (options.iv != '') {
    //   this.inviteValue = options.iv
    // }

    let token =   uni.getStorageSync('token')

    // if (token){
    //   this.loginType = 1
    //   this.getUserInfo(token)
    // }

  },
  onShow() {
    let that = this;
    setTimeout(function() {
      that.init();
    }, 100)
  },
  methods: {

    click(){
      this.init()
    },
    init: function() {
      var context = uni.createCanvasContext('canvasW', this),
          w = this.width,
          h = this.height;
      context.setFillStyle("#E9F2D7");
      context.setLineWidth(5);
      context.fillRect(0, 0, w, h);
      var pool = [
            "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
          ],
          str = '';
      for (var i = 0; i < 4; i++) {
        var c = pool[this.rn(0, pool.length - 1)];
        var deg = this.rn(-30, 30);
        context.setFontSize(28);
        context.setTextBaseline("top");
        context.setFillStyle(this.rc(80, 150));
        context.save();
        context.translate(30 * i + 15, parseInt(h / 1.5));
        context.rotate(deg * Math.PI / 180);
        context.fillText(c, -15 + 5, -15);
        context.restore();
        str += c;
      }
      console.log(str)
      this.oldStr = str;
      uni.setStorage({
        key: 'imgcode',
        data: str,
      });
      for (var i = 0; i < 40; i++) {
        context.beginPath();
        context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
        context.closePath();
        context.setFillStyle(this.rc(150, 200));
        context.fill();
      }
      context.draw();
    },
    rc: function(min, max) {
      var r = this.rn(min, max);
      var g = this.rn(min, max);
      var b = this.rn(min, max);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    rn: function(max, min) {
      return parseInt(Math.random() * (max - min)) + min;
    },
    canvasT: function(e) {
      console.error(e.detail.errMsg)
    },


    //下载
    download(){

      let res =  uni.getSystemInfoSync()

      console.log(res.platform)

      if (res.platform=='ios'){
        uni.showToast({
          title: '尽情期待',
          icon: 'none',
          duration: 1500,
          mask: true
        })
      }

      if (res.platform=='android'){
        uni.showToast({
          title: '尽情期待',
          icon: 'none',
          duration: 1500,
          mask: true
        })
      }

    },

    startCountdown() {
      this.countdown = 60; // 重置倒计时
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          if (this.countdown === 0) {
            clearInterval(timer);
            // this.isCountdownOver = true; // 标记倒计时结束
            this.codeType=1; // 重置状态
          }

        }
      }, 1000);
    },

    copyImg(){

      uni.showToast({
        title: '长按图片保存',
        icon: 'none',
        duration: 2000,
        mask: true
      })

    },

    getUserInfo(token){



      let data = {
        "token": token
      }
      getMyUserInfo(data).then((res)=>{
        console.log(res)
        if (res.code==0) {
          uni.showToast({
            title: '登录失败',
            icon: 'none',
            duration: 2000,
            mask: true
          })
          this.loginType = 0
        }

        if (res.code==1){
          this.userInfo = res.data
          // uni.setStorageSync('userInfo', res.data)
          this.all_children = res.data.all_children
        }
      })
    },

    Clipboard(){
      uni.setClipboardData({
        data: this.userInfo.y_url+'?iv='+ this.userInfo.invite_code,
        success: function (res) {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
            duration: 2000,
            mask: true
          });
        }
      })
    },

    getCode(){

      console.log(this.phoneValue.length)

      if (this.phoneValue.length < 11) {

        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
          duration: 2000,
          mask: true
        });

        return;
      }

      if (this.firstsValue==''){
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
          duration: 2000,
          mask: true
        });
        return;
      }
      console.log(this.firstsValue)
      console.log(this.verCode)
      if(this.firstsValue!=this.oldStr){
        uni.showToast({
          title: '验证码错误',
          icon: 'none',
          duration: 2000,
          mask: true
        });
        return;
      }
      // 调用发送验证码接口
      let data={
        "mobile": this.phoneValue,
        // "event":'register'
        // 登录
        "event":'mobilelogin'

      }
      postSmsSend(data).then((res)=>{
        this.codeType = 2
        // console.log(res[1].data,"发送验证码");
        this.startCountdown(); // 开始倒计时
      })

      // 发送成功后开始倒计时
      // this.startCountdown();
      // console.log(123);

    },
    login(){


      if (this.phoneValue == '') {
        uni.showToast({
          title: '请填写手机号',
          icon: 'none',
          duration: 2000,
          mask: true
        });
      }
      if (this.codeValue == '') {
        uni.showToast({
          title: '请填写验证码',
          icon: 'none',
          duration: 2000,
          mask: true
        });
      }

      let data = {
        "mobile": this.phoneValue,
        "captcha": this.codeValue,
        "invite_rwm": this.inviteValue,

      }
      postUserLogin(data).then((res) => {
        // console.log(res[1].data);
        if (res.code == 0) {

          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000,
            mask: true
          });

        } else if (res.code == 1) {
          // uni.showToast({
          //   title: res.msg,
          //   icon: 'none',
          //   duration: 2000,
          //   mask: true
          // });

          this.loginLoading = 1

          uni.setStorageSync('userInfo', res.data.userinfo);
          uni.setStorageSync('Token', res.data.userinfo.token);
          console.log(res.data.data, "用户信息");
          uni.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000,
            mask: true
          });
          uni.switchTab({
            url: '/pages/home/index'
          });

          // this.loginType = 1
          // uni.setStorageSync('token', res.data.userinfo.token)
          //
          // this.getUserInfo(res.data.userinfo.token)

          // this.userInfo = res.data.userinfo
          // this.all_children = res.data.all_children

        }
      })
    }
  }
}
</script>

<style scoped>
#myInput::placeholder {
  color: red;
}

.uni-input-placeholder{
  color: #AAAAAA;
}

.login{
  background: #F8F7F8;
}

.register{
  background: url(https://hyxs.ychlkj.cn/uploads/20231226/6d19a90c6ea119a9ec9b7a5fb1f54874.png);
  background-size: 750px 100%;
  background-repeat: round;
}
</style>
